<template>
	<view class="content">
		<my-header @instruct="handinstruct" :instruct="instruct" :title="parentTitle" />
		<up-sticky bgColor="#fff">
			<up-tabs lineHeight="2" @click="tabchange" :current="current" lineWidth="24" lineColor="#1859D0"
				:scrollable='false' :list="list1"></up-tabs>
		</up-sticky>
		<scroll-view :scroll-y="true" class="ScrollView" @scrolltolower="loadMore">
			<view class="orderitem" v-for="(item,index) in queryorderlist" :key="index">
				<view class="orderitem-header">
					<view class="orderitem-header-left" v-if="item.orderNo">
						订单编号: {{item.orderNo}}
					</view>
					<view class="orderitem-header-left" v-else>
						{{item.refundTypeStr}}编号: {{item.refundNo}}
					</view>
					<view class="orderitem-header-right" v-if="item.orderStatusStr">
						{{item.orderStatusStr}}
					</view>
					<view class="orderitem-header-right" v-else>
						{{item.refundStatusStr}}
					</view>
				</view>
				<view class="kong-line">

				</view>
				<view class="cominformation" @click="goorderdetail(item)">
					<image class="imagesty" v-if="item.commonFileEntities == null || item.commonFileEntities.length == 0"
						:src="proxy.serverimageUrl + 'home/shopimg.png'" mode=""></image>
					<image class="imagesty" v-else :src="item.commonFileEntities[0].url" mode=""></image>
					<view class="textBox">
						<p class="title">{{item.schoolName}}—{{item.cname}}</p>
						<p class="nametext">{{item.sname}},{{item.specificationsSize}}</p>
						<p class="numtext nametext">x{{item.number}}</p>
					</view>
				</view>
				<view class="dateBox">
					<view class="dateBox-left">
						{{item.createTime}}
					</view>
					<view class="dateBox-right" v-if="item.orderNumber">
						共{{item.orderNumber}}件商品,合计 <span class="price">￥{{item.totalAmount}}</span>
					</view>
					<view class="dateBox-right" v-else>
						共{{item.refundNumber}}件商品,合计 <span class="price">￥{{item.totalPrice}}</span>
					</view>
				</view>
				<view class="btnBox" v-if="item.orderStatusStr !== '待发货'">
					<view class="" style="width: 40%;display: flex;align-items: center;">
						<template v-if="item.orderStatusStr === '待付款'">
							<view style="font-size: 24rpx;color:#F84747;margin-right: 10rpx;">
								剩余
							</view>
							<up-count-down :time="item.overdueDate" format="HH:mm:ss"></up-count-down>
						</template>
					</view>
					<view class="btn" v-if="item.orderStatusStr === '待收货'">
						<up-button shape="circle" @click.stop="Confirmreceipt(item.orderId)" color="#013CAA"
							text="确认收货"></up-button>
					</view>
					<view class="btn" v-if="item.orderStatusStr === '已完成'">
						<u-button type="primary" @click.stop="goafersales(item)" shape="circle" color="#013CAA"
							:plain="true" text="申请售后"></u-button>
					</view>
					<view class="btnbox" v-if="item.orderStatusStr === '待付款'">
						<view class="btn">
						<up-button @click="closeorder(item.orderId)" shape="circle"  text="取消订单"></up-button>
						</view>
						<view class="btn" >
						<up-button shape="circle" @click="gopay(item.token)" color="#013CAA"
							text="去支付"></up-button>
							</view>
					</view>
				</view>
			</view>
			<up-loadmore :status="loadMoreStatus" />
			<view class="kongBox" style="height: 30rpx; width: 100%;"></view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		queryPageOrderByOpenid,
		queryPageRefundRecord,
		orderConfirm,
		closeOrderInfo
	} from '../../utils/api.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const parentTitle = ref('我的订单')
	const current = ref(0)
	onLoad((o) => {
		current.value = o.current
	})
	onShow(() => {
		queryorderlist.value = []
		if (current.value < 5) {
			orderform.value.status = Number(current.value) + 1
		} else {
			orderform.value.refundStatus = ''
		}
		queryorder()
	})
	/*申请售后跳转*/
	const goafersales = (item) => {
		if (item.isRefund) {
			uni.showToast({
				title: '已申请，请等待',
				duration: 1000,
				icon: 'error'
			})
			return
		} else {
			uni.navigateTo({
				url: '/subpages/AfterSales/index?orderId=' + item.orderId + '&current=' + current.value
			})
		}

	}
	/*取消订单*/
	const closeorder = (value) =>{
		let params = {
			orderId:value
		}
		closeOrderInfo(params).then(res=>{
			if(res.code == 200){
				setTimeout(() => {
					uni.showToast({
						title: '取消订单成功',
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.hideToast();
						queryorderlist.value = []
						queryorder()
					}, 1000)
				}, 0)
			}
		})
	}
	
	/*跳转到订单详情*/
	const goorderdetail = (item) => {
		
		if (current.value == 4 && item.refundId) {
			if (item.isRefund) {
				uni.showToast({
					title: '已申请，请等待',
					duration: 1000,
					icon: 'error'
				})
				return
			} else {
				uni.navigateTo({
					url: '/subpages/AfterSales/detail?refundId=' + item.refundId + '&current=' + current.value
				})
			}

		} else {
			uni.navigateTo({
				url: '/subpages/orderdetail/index?orderId=' + item.orderId + '&current=' + current.value
			})
		}

	}
	const Confirmreceipt = (orderid) => {
		let params = {
			orderId: orderid,
			status: 3
		}
		orderConfirm(params).then(res => {
			if (res.code == 200) {
				setTimeout(() => {
					uni.showToast({
						title: '确认收货成功',
						duration: 1000,
						icon: 'success'
					})
					setTimeout(() => {
						uni.hideToast();
						queryorderlist.value = []
						queryorder()
					}, 1000)
				}, 0)
			}
		})
	}
	/*点击tab栏切换*/
	const tabchange = (e) => {
		current.value = e.index
		orderform.value.pageNum = 1
		queryorderlist.value = []
		if (e.id == 5) {
			orderform.value.refundStatus = ''
			orderform.value.status = ''
		} else {
			orderform.value.status = e.id
		}
		queryorder()
	}
	/*查询订单列表的参数*/
	const orderform = ref({
		openid: uni.getStorageSync('openid'),
		pageNum: 1,
		pageSize: 3,
		status: '',
		refundStatus: '',
		sid: uni.getStorageSync('sid')
	})
	/*点击去支付调支付接口*/
	const gopay = (token) =>{
		uni.openEmbeddedMiniProgram({
			appId: 'wxe2ae77d4cbb8abf0',
			path: `/pages/qrPay/qrPay?t=${token}`, // token 从接口获取
			envVersion: 'release', // 打开环境
			success(res){
				console.log(res,'res........');
			},
			fail(error){
				console.log(error,'error........');
			},
			complete(complete){
				console.log(complete,'complete........');
			}
		})
	}
	/*列表数据字段*/
	const queryorderlist = ref([])
	const loadMoreStatus = ref('loadmore');
	/*请求列表数据*/
	const queryorder = () => {
		loadMoreStatus.value = 'loading';
		if (current.value < 4) {
			queryPageOrderByOpenid(orderform.value).then(res => {
				if (res.code == 200) {
					res.rows.map(item=>{
						item.overdueDate = Math.floor(item.overdueTime * 60 * 1000 - (new Date() - new Date(item.createTime))); 
					})
					const list = res.rows
					queryorderlist.value = queryorderlist.value.concat(list)
					if (orderform.value.pageNum * orderform.value.pageSize >= res.total) {
						loadMoreStatus.value = 'nomore';
					} else {
						loadMoreStatus.value = 'loadmore';
					}
				}
			})
		} else {
			queryPageRefundRecord(orderform.value).then(res => {
				if (res.code == 200) {
					const list = res.rows
					queryorderlist.value = queryorderlist.value.concat(list)
					if (orderform.value.pageNum * orderform.value.pageSize >= res.total) {
						loadMoreStatus.value = 'nomore';
					} else {
						loadMoreStatus.value = 'loadmore';
					}
				}
			})
		}

	}
	const loadMore = () => {
		if (loadMoreStatus.value == 'loading' || loadMoreStatus.value == 'nomore') {
			return;
		}
		orderform.value.pageNum++
		queryorder()
	}
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				uni.switchTab({
					url: '/pages/Mypage/index'
				})
				break;
		}
	}
	/*tab栏默认选中*/
	const list1 = reactive([{
			name: '待付款',
			id: 1
		},
		{
			name: '待发货',
			id: 2
		},
		{
			name: '待收货',
			id: 3
		},
		{
			name: '已完成',
			id: 4
		},
		{
			name: '退换货',
			id: 5
		}
	]);
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F2F2F2;
		height: 100vh;

		::v-deep .u-tabs__wrapper__nav__item {
			height: 70rpx !important;
		}

		.ScrollView {
			height: calc(100vh - 264rpx);
			padding: 0 30rpx;
			box-sizing: border-box;

			.orderitem {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 33rpx;
				margin-top: 30rpx;

				.orderitem-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.orderitem-header-left {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #303030;
					}

					.orderitem-header-right {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #1859D0;
					}
				}

				.kong-line {
					margin-top: 27rpx;
					height: 1rpx;
					width: 100%;
					background: #DFDFDF;

				}

				.cominformation {
					display: flex;
					align-items: center;
					margin-top: 33rpx;

					.imagesty {
						width: 180rpx;
						height: 180rpx;
					}

					.textBox {
						margin-left: 30rpx;

						.title {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #303030;
							line-height: 30rpx;
						}

						.nametext {
							margin-top: 23rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #636363;
							line-height: 24rpx;
						}

						.numtext {
							margin-top: 79rpx;
						}
					}
				}

				.dateBox {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.dateBox-left {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A8A8A8;
					}

					.dateBox-right {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #303030;

						.price {
							font-weight: bold;
							font-size: 34rpx;
						}
					}
				}

				.btnBox {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 160rpx;
						height: 64rpx;
					}
					.btnbox{
						width: 60%;
						align-items: center;
						justify-content: space-between;
						display: flex;
					}
					::v-deep .u-count-down{
						.u-count-down__text{
							color: #F84747 !important;
							font-size: 24rpx !important;
						}
					}
				}
			}
		}
	}
</style>